<template>
  <div class="my-counter">
    <button type="button" class="btn btn-light" :disabled="obj.goods_count === 1" @click="subFn">-</button>
    <input type="number" @change="changeFn" class="form-control inp" :value="obj.goods_count">
    <button type="button" class="btn btn-light" @click="addFn">+</button>
  </div>
</template>

<script>
// 目标: 商品数量 - 控制
// 1. 外部传入数据对象
// 2. v-model关联对象的goods_count属性和输入框 (双向绑定)
// 3. 商品按钮 +和-, 商品数量最少1件
// 4. 侦听数量改变, 小于1, 直接强制覆盖1

import { mapMutations } from 'vuex'

export default {
  methods:{
    ...mapMutations('cart',['addNum']),
    addFn(){
      // console.log(this.obj.id-1);
      this.addNum(this.obj.id-1)
    },
    ...mapMutations('cart', ['changeCountNum']),
    changeFn(e){
      // console.log(e.target.value);
      this.changeCountNum({
        index:this.obj.id - 1,
        num:e.target.value
      })
    },
    ...mapMutations('cart',['subNum']),
    subFn(){
      this.subNum(this.obj.id-1)
    }

  },
  props: {
    obj: Object, // 商品对象
    i: Number
  },
  // 因为数量控制要通过对象"互相引用的关系"来影响外面对象里的数量值, 所以最好传 对象进来
  // watch: {
  //   obj: {
  //     deep: true,
  //     handler(){ // 拿到商品数量, 判断小于1, 强制修改成1
  //       if (this.obj.goods_count < 1) {
  //         this.obj.goods_count = 1
  //       }
  //     }
  //   }
  // }
}
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn, .inp{
    transform: scale(0.9);
  }
}
</style>